<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="成长值卡券配置">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="卡券名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.name"
                  placeholder="输入卡券名称"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="卡券编号">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.couponCode"
                  placeholder="输入卡券编号"
                />
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="卡券类别">
                <a-select
                  ref="select"
                  v-model:value="formState.couponCategory"
                  style="width: 100%"
                  placeholder="卡券类别"
                >
                  <a-select-option :value="1">购物券</a-select-option>
                  <a-select-option :value="2">鉴定券</a-select-option>
                  <a-select-option :value="3">养护券</a-select-option>
                  <a-select-option :value="4">找贷券</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="使用类目">
                <a-select
                  ref="select"
                  v-model:value="formState.typeId"
                  style="width: 100%"
                  placeholder="使用类目"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in goodsTypeList"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.name }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="抵扣方式">
                <a-select
                  ref="select"
                  v-model:value="formState.type"
                  style="width: 100%"
                  placeholder="抵扣方式"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">满减</a-select-option>
                  <a-select-option :value="2">折扣</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="成长等级">
                <a-select
                  ref="select"
                  v-model:value="formState.growthId"
                  style="width: 100%"
                  placeholder="成长等级"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option
                    v-for="item in growthLevelList"
                    :key="item.id"
                    :value="item.id"
                    >{{ item.level }}级</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="卡券状态">
                <a-select
                  ref="select"
                  v-model:value="formState.state"
                  style="width: 100%"
                  placeholder="卡券状态"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">启用</a-select-option>
                  <a-select-option :value="2">禁用</a-select-option>
                  <a-select-option :value="3">删除</a-select-option>
                  <a-select-option :value="4">已发完</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="创建时间">
                <a-range-picker
                  v-model:value="dateTime"
                  @change="handleChangeDate"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleOpen('新建卡券', {})"
              >新建</a-button
            >
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="couponColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'couponCategory'">
              {{
                record.couponCategory === 1
                  ? "购物券"
                  : record.couponCategory === 2
                  ? "鉴定券"
                  : record.couponCategory === 3
                  ? "养护券"
                  : record.couponCategory === 4
                  ? "找货券"
                  : ""
              }}
            </template>
            <template v-if="column.key === 'type'">
              {{ record.type === 1 ? "满减" : record.type === 2 ? "折扣" : "" }}
            </template>
            <template v-if="column.key === 'typeId'">
              {{
                record.typeId.join(",") == 0
                  ? "全部"
                  : filterTypeIds(record.typeId)
              }}
            </template>
            <template v-if="column.key === 'state'">
              {{
                record.state === 1
                  ? "启用"
                  : record.state === 2
                  ? "禁用"
                  : record.state === 3
                  ? "删除"
                  : record.state === 4
                  ? "已发完"
                  : ""
              }}
            </template>
            <template v-if="column.key === 'maxNum'">
              {{ record.maxNum == 0 ? "无限制" : record.maxNum }}
            </template>
            <template v-if="column.key === 'validDay'">
              {{ record.validDay + "天" }}
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleEdit(record)">查看</a-button>
                <a-button @click="handleOpen('编辑卡券', record)"
                  >编辑</a-button
                >
                <a-popconfirm
                  title="您是否要启用此条数据?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleChangeState(record)"
                >
                  <a-button v-if="record.state === 2" type="primary"
                    >启用</a-button
                  >
                </a-popconfirm>
                <a-popconfirm
                  title="您是否要禁用此条数据?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleChangeState(record)"
                >
                  <a-button v-if="record.state === 1" type="primary"
                    >禁用</a-button
                  >
                </a-popconfirm>
                <a-popconfirm
                  title="您是否要删除此条数据?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleChangeState(record)"
                >
                  <a-button danger v-if="record.grantedNum === 0" type="primary"
                    >删除</a-button
                  >
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
    <couponDeploy ref="couponRef" @refreshList="refreshList" />
    <couponDetails ref="detailsRef" />
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { couponColumns } from "./columns.js";
import couponDeploy from "./matureModule/couponDeploy.vue";
import couponDetails from "./matureModule/couponDetails.vue";
import { goodsType } from "@/api/order";
import { exporeFile } from "@/utils/exporeFile";
import { listCouponConfig, editCouponConfig, exportCoupon } from "@/api/market";
import { listGrowthConfig } from "@/api/group";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  source: 3,
  couponCategory: undefined,
  couponCode: undefined,
  name: undefined,
  state: undefined,
  type: undefined,
  typeId: undefined,
  startTime: undefined,
  endTime: undefined,
});
const couponRef = ref(null);
const detailsRef = ref(null);

// 获取卡券列表数据
const dataSource = ref([]);
const getListCouponConfigFn = async () => {
  const res = await listCouponConfig(formState.value);
  if (res.code === 200) {
    dataSource.value = res.data.list;
    pagination.value.total = res.data.total;
  }
};
function handleSearch() {
  formState.value.page = 1
  formState.value.pageSize = 10
  getListCouponConfigFn();
}
const handleOpen = (titles, record) => {
  couponRef.value.open(titles, record);
};
const handleEdit = (record) => {
  detailsRef.value.open(record.id, goodsTypeList.value);
};
// 过滤类型
const filterTypeIds = (ids) => {
  return goodsTypeList.value
    .map((item) => {
      if (ids.includes(item.id)) {
        return item.name;
      }
    })
    .filter((item) => item != undefined)
    .join("/");
};
function handleReset() {
  dateTime.value = [null, null]
  formState.value = {
    page: 1,
    pageSize: 10,
    source: 3,
    couponCategory: undefined,
    couponCode: undefined,
    name: undefined,
    state: undefined,
    type: undefined,
    typeId: undefined,
    startTime: undefined,
    endTime: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getListCouponConfigFn();
}
// 获取类目
const goodsTypeList = ref([]);
const getGoodsType = async () => {
  const result = await goodsType();
  if (result.code == 200) {
    goodsTypeList.value = result.data;
  }
};
// 启用禁用除
function handleChangeState(record) {
  const { id, state } = record;
  const data = { id, state: state == 1 ? 2 : 1 };
  editCouponConfig(data).then((res) => {
    if (res.code == 200) {
      getListCouponConfigFn();
      message.success(res.msg);
    } else {
      message.error(res.msg);
    }
  });
}
//   成长等级
const growthLevelList = ref([]);
const getListGrowthConfig = async () => {
  const data = await listGrowthConfig({ page: 1, pageSize: 999 });
  if (data.code === 200) {
    growthLevelList.value = data.data.list;
  }
};
const dateTime = ref([null, null]);
function handleChangeDate(date, dateString) {
  dateTime.value = date;
  formState.value.startTime = dateString[0];
  formState.value.endTime = dateString[1];
}
const handleExport = async () => {
  const data = await exportCoupon(formState.value);
  exporeFile("成长值卡券列表.xls", data);
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getListCouponConfigFn();
}
function refreshList() {
  getListCouponConfigFn();
}
onMounted(() => {
  getListGrowthConfig();
  getListCouponConfigFn();
  getGoodsType();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
